#{extends 'main_cliente.html' /} #{set title:'Minha conta' /}
<link rel="stylesheet" type="text/css"
	href="@{'/public/stylesheets/layout_cliente.css'}" />
<link type="text/css" rel="stylesheet"
	href="@{'/public/stylesheets/right.css'}" />
<link type="text/css" rel="stylesheet"
	href="@{'/public/stylesheets/layout_caixinha.css'}" />
<link rel="stylesheet" type="text/css" media="screen"
	href="../../../public/stylesheets/layout_listagem.css">
<link rel="stylesheet" type="text/css" media="all"
	href="@{'public/stylesheets/layout_produto.css'}">

<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="@{'/public/javascripts/jquery.jcarousel.min.js'}"
	type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.slide.js'}"
	type="text/javascript" charset="${_response_encoding}"></script>

<script language="javascript">
	$(document).ready(function() {
		$("#slideimg").PikaChoose({
			carousel : true,
			carouselVertical : true
		});
	});
</script>

<script type="text/javascript">
	function envia() {

		document.formLogin.submit();
	}
</script>

<script type="text/javascript">
	function open_modal(id) {
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		$('#mask').css({
			'width' : maskWidth,
			'height' : maskHeight
		});

		$('#mask').fadeIn(1000);
		$('#mask').fadeTo("slow", 0.8);

		//Get the window height and width  
		var winH = $(window).height();
		var winW = $(window).width();

		$(id).css('top', winH / 2 - $(id).height() / 2);
		$(id).css('left', winW / 2 - $(id).width() / 2);
		$(id).fadeIn(2000);
	};
	$(document).ready(function() {

		$('a[name=modal]').click(function(e) {
			e.preventDefault();
			open_modal($(this).attr('href'));
		});

		$('.window .close').click(function(e) {
			e.preventDefault();

			$('#mask').hide();
			$('.window').hide();

		});

		$('#mask').click(function() {
			$(this).hide();
			$('.window').hide();
		});
	});

	function escolhe_modal(id) {
		if (id == 0) {

			open_modal('#dialog0');
		}
		if (id == 1) {
			open_modal('#dialog1');
		}
		if (id == 2) {
			open_modal('#dialog2');
		}
		if (id == 3) {
			open_modal('#dialog3');
		}
		if (id == 4) {
			open_modal('#dialog4');
		}
		if (id == 5) {
			open_modal('#dialog5');
		}
	}
</script>

<div id="conteudo">
	<form name="formLogin" action="@{login()}">
		<div id="barramenu">

			<div id="login">
                <b>${data}</b>
                <br />
                <p>Olá, ${cliente.usuario}.</p>     
                <br />
                <a href="" onClick="open_modal(dialog)" name="modal"><img id="img" src="../../../public/images/caixinhaDesejos.png" /></a>
                <a href="" onClick="open_modal(dialog)" name="modal" id="link_pedidos">#{ifnot pedidoEmAberto}Nenhuma caixinha em aberto!#{/ifnot} #{else}Uma caixinha em Aberto!#{/else}</a>
                <ul id="logado">
                    <li><a href="@{Clientes.editCliente(cliente.id)}">Editar Cadastro</a></li>
                    <li><a href="@{Application.logout()}" >Sair da conta</a></li>
                </ul>
            	<br /> 
            	<h7><span class="error">#{error 'login' /}</span></h7>
                     	
        </div>
</form>		
        <h1>Compartilhe</h1>
        <a href="http://www.facebook.com/IaraBijuis?ref=ts" id="curtirpag"><img src="../../../public/images/curta-no-facebook.png" /></a>      
    </div>

<h1>Bem-Vindo!</h1>

<div class="slide">
	<ul class="jcarousel-skin" id="slideimg" name="slideimg">
		<li><a href=""><img src="../../../public/images/Slide/1.png" /></a><span>Pulseira
				trançada com pedrinhas.</span></li>
		<li><a href=""><img src="../../../public/images/Slide/2.png"></a><span>Lançamento!
				Pulseiras com cores variadas</span></li>
		<li><a href=""><img src="../../../public/images/Slide/3.png" /></a><span>Conheça
				nossos pordutos!</span></li>
		<li><a href=""><img src="../../../public/images/Slide/4.png" /></a><span>Pulseira
				elegante.</span></li>
		<li><a href=""><img src="../../../public/images/Slide/5.png" /></a><span>Pulseira
				banhada a ouro.</span></li>
        <li><a href=""><img src="../../../public/images/Slide/6.png" /></a><span>Pulseira
				banhada a ouro.</span></li>
	</ul>
</div>

<h6>___________________________________________________________________________________________________________________</h6>
<h4>Conheça nossa</h4>
<h2>Vitrine !</h2>

<div id="barra"></div>

<div id="vitrine">

		#{list contador, as:'contador'}

		<table align="left">

			<tr>
				<td><a id="prod" name="modal" onClick="escolhe_modal(${contador})" href=""><img class="imagemvit" src="@{Produtos.imagemProduto(produtos[contador].id)}"/></a></br><span>${produtos[contador].nome}</span><br /><span>R$ ${valores[contador]}</span><br /><a name="modal" onClick="escolhe_modal(${contador})" href="" id="ver"></a></td>
			</tr>
		</table>
		#{/list}

	</table>

</div>

<div id="boxes">

	<div id="dialog" class="window">
		<a href="#" class="close"><img
			src="../../../public/images/close.png" /></a><br />
		<h5><img src="../../../public/images/caixinhaDesejos.png" />Caixinha de Desejos</h5>
		<br />

		<table id="tab">
			<thead>
				<tr>
					<th>Produto</th>
					<th>Qtd.</th>
					<th>Preço</th>
					<th>Total</th>
					<th>Opção</th>

				</tr>
			</thead>
			<tbody>
				#{list contadorPedidos, as:'contador'}
				<tr>
					<td>${nomesProdutos[contador]}</td>
					<td>${quantidades[contador]}</td>
					<td>R$ ${valoresUnitarios[contador]}</td>
					<td>R$ ${valoresItens[contador]}</td>
					<td><a
						onclick="return confirm('Deseja realmente excluir este produto da sua caixinha?')"
						id="remover" href="@{excluiProduto(idsProdutos[contador])}"><img
							src="../../../public/images/remover.png" /></a></td>

				</tr>
				#{/list}
			</tbody>
			<tfoot>
			</tfoot>

		</table>
		<h4>Preço Total do Pedido: R$ ${valorTotalPedido}</h4>
		<br /> <a href="@{finalizaPedido(idPedido)}"
			onclick="return confirm('Deseja realmente enviar a sua caixinha de desejos agora? O pedido não poderá ser alterado após o envio!')"
			class="enviar"></a><br />
	</div>

	<div id="boxes" align="center">


		#{form @Clientes.addProduto(), name:'form_modal0', id:'form_modal0'}
		<div id="dialog0" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{Produtos.imagemProduto(produtos[0].id)}" />
			<h4>${produtos[0].nome}</h4>
			<h6>${produtos[0].descricao}</h6>
			<h4>R$ ${valores[0]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[0].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{if produtos.size()>1} #{form @Clientes.addProduto(),
		name:'form_modal1', id:'form_modal1'}
		<div id="dialog1" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{Produtos.imagemProduto(produtos[1].id)}" />
			<h4>${produtos[1].nome}</h4>
			<h6>${produtos[1].descricao}</h6>
			<h4>R$ ${valores[1]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[1].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{/if} #{if produtos.size()>2} #{form @Clientes.addProduto(),
		name:'form_modal2', id:'form_modal2'}
		<div id="dialog2" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{Produtos.imagemProduto(produtos[2].id)}" />
			<h4>${produtos[2].nome}</h4>
			<h6>${produtos[2].descricao}</h6>
			<h4>R$ ${valores[2]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[2].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{/if} #{if produtos.size()>3} #{form @Clientes.addProduto(),
		name:'form_modal3', id:'form_modal3'}
		<div id="dialog3" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{Produtos.imagemProduto(produtos[3].id)}" />
			<h4>${produtos[3].nome}</h4>
			<h6>${produtos[3].descricao}</h6>
			<h4>R$ ${valores[3]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[3].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{/if} #{if produtos.size()>4} #{form @Clientes.addProduto(),
		name:'form_modal4', id:'form_modal4'}
		<div id="dialog4" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{Produtos.imagemProduto(produtos[4].id)}" />
			<h4>${produtos[4].nome}</h4>
			<h6>${produtos[4].descricao}</h6>
			<h4>R$ ${valores[4]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[4].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} #{/if} #{if produtos.size()>5} #{form @Clientes.addProduto(),
		name:'form_modal5', id:'form_modal5'}
		<div id="dialog5" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{Produtos.imagemProduto(produtos[5].id)}" />
			<h4>${produtos[5].nome}</h4>
			<h6>${produtos[5].descricao}</h6>
			<h4>R$ ${valores[5]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden"
				value="${produtos[5].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}"
				value="${quantidade}" id="quantid" min="1" required
				oninput="check(this)"><input type="image" id="adicionar"
				onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')"
				src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} 
        #{/if}

		<!-- Máscara para cobrir a tela -->
		<div id="mask">
        </div>

	</div>

</div>






